<template>
  <div class="py-2 w-[80%] mx-auto" id="div-1">
    <a-row class="w-full" gutter="20" id="a-row-1">
      <a-col class="flex-1 w-full" id="a-col-1">
        <a-flex vertical gap="10" id="a-flex-1">
          <a-typegraphy-paragraph class="bg-[#E6E5CC] p-2 text-[#736974] rounded-[4px]" id="a-typegraphy-paragraph-1"
            >古诗大全</a-typegraphy-paragraph
          >
          <a-typegraphy-paragraph
            class="bg-[#E6E5CC] p-2 text-[#333] rounded-[4px]"
            v-for="(item, index) in list1"
            :key="index"
            :id="`a-typegraphy-paragraph-2-${index}`"
          >
            <a-flex wrap="wrap" id="a-flex-2">
              <a-image :src="item.img" id="a-image-1" />
              <a-typegraphy-paragraph class="flex-1 bg-[#E6E5CC] p-2 text-[#333]" :id="`a-typegraphy-paragraph-3-${index}`">
                <a-flex vertical wrap="wrap" :id="`a-flex-3-${index}`">
                  <a-typegraphy-paragraph class="p-2 text-[#114786]" :id="`a-typegraphy-paragraph-4-${index}`">
                    {{ item.name }}
                  </a-typegraphy-paragraph>
                  <a-typegraphy-paragraph class="p-2 text-[#736974]" :id="`a-typegraphy-paragraph-5-${index}`">
                    <a-space :id="`a-space-1-${index}`">
                      <a-typegraphy-text :id="`a-typegraphy-text-1-${index}`">作者:{{ item.author }}</a-typegraphy-text>
                      <a-typegraphy-text :id="`a-typegraphy-text-2-${index}`">访问量:{{ item.pv }}</a-typegraphy-text>
                      <a-typegraphy-text :id="`a-typegraphy-text-3-${index}`">收录时间:{{ item.time }}</a-typegraphy-text>
                    </a-space>
                  </a-typegraphy-paragraph>
                  <a-typegraphy-paragraph class="p-2 text-[#333]" :id="`a-typegraphy-paragraph-6-${index}`">
                    {{ item.content }}
                  </a-typegraphy-paragraph>
                </a-flex>
              </a-typegraphy-paragraph>
            </a-flex>
          </a-typegraphy-paragraph>
          <a-typegraphy-paragraph class="bg-[#E6E5CC] text-[#736974] rounded-[4px] pb-4" id="a-typegraphy-paragraph-7">
            <a-typegraphy-text class="block p-4 border-b-[#ccc] text-[18px] border-0 border-b-[1px] border-solid" id="a-typegraphy-text-4"
              >诗句大全</a-typegraphy-text
            >
            <a-typography-link href="#" id="a-typography-link-1">
              <a-typegraphy-text
                v-for="(item, index) in list3"
                :key="index"
                :id="`a-typography-text-5-${index}`"
                class="block mx-4 pt-6 pb-4 !text-[#736974] border-b-[#999] border-0 border-b-[1px] border-dashed overflow-hidden text-ellipsis whitespace-nowrap"
                >{{ item.title }}</a-typegraphy-text
              >
            </a-typography-link>
          </a-typegraphy-paragraph>
        </a-flex>
      </a-col>
      <a-col :span="8" class="flex flex-col pt-4" id="a-col-2">
        <a-typegraphy-paragraph
          class="bg-[#E6E5CC] p-4 text-[#333] rounded-[4px] border-white w-full mt-[10px]"
          v-for="(item, index) in list2"
          :key="index"
          :id="`a-typegraphy-paragraph-7-${index}`"
        >
          <a-typegraphy-text class="block text-[#333] font-bold text-[18px] py-4" :id="`a-typography-text-6-${index}`">{{
            item.title
          }}</a-typegraphy-text>
          <a-typography-link href="#" class="w-full flex flex-wrap gap-4" :id="`a-typography-link-2-${index}`">
            <a-typegraphy-text
              class="!text-[#736974] w-[30%] text-center py-2 border-[1px] border-solid border-[#DAD7D6] rounded-[4px]"
              v-for="(subItem, idx) in item.list"
              :key="idx"
              :id="`a-typography-text-7-${index}`"
              >{{ subItem.name }}</a-typegraphy-text
            >
          </a-typography-link>
        </a-typegraphy-paragraph>
      </a-col>
    </a-row>
    <a-row class="w-full pt-4" id="a-row-2">
      <a-typegraphy-paragraph class="bg-[#E6E5CC] p-2 text-[#736974] w-full">友情链接</a-typegraphy-paragraph>
    </a-row>
  </div>
</template>

<script setup>
  const list2 = [
    {
      title: '诗人',
      list: [
        { name: '李白' },
        { name: '王维' },
        { name: '孟浩然' },
        { name: '杜甫' },
        { name: '苏轼' },
        { name: '辛弃疾' },
        { name: '岳飞' },
        { name: '曹操' },
      ],
    },
    {
      title: '古诗',
      list: [
        { name: '木兰诗' },
        { name: '七步诗' },
        { name: '小池' },
        { name: '竹枝词' },
        { name: '绝句' },
        { name: '律诗' },
        { name: '词牌' },
      ],
    },
    {
      title: '古籍',
      list: [
        { name: '水浒传' },
        { name: '三国演义' },
        { name: '西游记' },
        { name: '红楼梦' },
        { name: '水浒传' },
        { name: '诗经' },
        { name: '楚辞' },
      ],
    },
  ];
  const list1 = [
    {
      img: 'https://picsum.photos/id/2/136/163',
      name: '静夜思',
      author: '李白',
      content: '床前明月光，疑是地上霜。举头望明月，低头思故乡。',
      pv: 1000,
      time: '2022-07-09',
    },
    {
      img: 'https://picsum.photos/id/3/136/163',
      name: '望庐山瀑布',
      author: '李白',
      content: '日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。',
      pv: 2000,
      time: '2022-07-09',
    },
    {
      img: 'https://picsum.photos/id/4/136/163',
      name: '春夜喜雨',
      author: '李白',
      content: '雨霖铃铃，风蝉凄切，雨送黄昏花易落，风送春山雨易来。',
      pv: 3000,
      time: '2022-07-09',
    },
    {
      img: 'https://picsum.photos/id/3/136/163',
      name: '春望',
      author: '杜甫',
      content: '国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。',
      pv: 2450,
      time: '2023-01-15',
    },
    {
      img: 'https://picsum.photos/id/4/136/163',
      name: '赋得古原草送别',
      author: '白居易',
      content: '离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。',
      pv: 3780,
      time: '2021-09-22',
    },
    {
      img: 'https://picsum.photos/id/5/136/163',
      name: '登鹳雀楼',
      author: '王之涣',
      content: '白日依山尽，黄河入海流。欲穷千里目，更上一层楼。',
      pv: 5120,
      time: '2022-11-30',
    },
    {
      img: 'https://picsum.photos/id/6/136/163',
      name: '锦瑟',
      author: '李商隐',
      content: '锦瑟无端五十弦，一弦一柱思华年。庄生晓梦迷蝴蝶，望帝春心托杜鹃。',
      pv: 1890,
      time: '2020-05-17',
    },
    {
      img: 'https://picsum.photos/id/7/136/163',
      name: '水调歌头',
      author: '苏轼',
      content: '明月几时有？把酒问青天。不知天上宫阙，今夕是何年。',
      pv: 8960,
      time: '2023-06-08',
    },
    {
      img: 'https://picsum.photos/id/8/136/163',
      name: '山居秋暝',
      author: '王维',
      content: '空山新雨后，天气晚来秋。明月松间照，清泉石上流。',
      pv: 3240,
      time: '2021-08-12',
    },
    {
      img: 'https://picsum.photos/id/9/136/163',
      name: '春晓',
      author: '孟浩然',
      content: '春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。',
      pv: 4320,
      time: '2022-04-05',
    },
    {
      img: 'https://picsum.photos/id/10/136/163',
      name: '江雪',
      author: '柳宗元',
      content: '千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。',
      pv: 2670,
      time: '2020-12-25',
    },
    {
      img: 'https://picsum.photos/id/11/136/163',
      name: '清明',
      author: '杜牧',
      content: '清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。',
      pv: 3980,
      time: '2023-04-04',
    },
    {
      img: 'https://picsum.photos/id/12/136/163',
      name: '如梦令',
      author: '李清照',
      content: '常记溪亭日暮，沉醉不知归路。兴尽晚回舟，误入藕花深处。',
      pv: 5210,
      time: '2022-08-19',
    },
    {
      img: 'https://picsum.photos/id/13/136/163',
      name: '青玉案·元夕',
      author: '辛弃疾',
      content: '东风夜放花千树，更吹落、星如雨。宝马雕车香满路。',
      pv: 6120,
      time: '2021-02-26',
    },
    {
      img: 'https://picsum.photos/id/14/136/163',
      name: '示儿',
      author: '陆游',
      content: '死去元知万事空，但悲不见九州同。王师北定中原日，家祭无忘告乃翁。',
      pv: 2870,
      time: '2020-09-03',
    },
    {
      img: 'https://picsum.photos/id/15/136/163',
      name: '枫桥夜泊',
      author: '张继',
      content: '月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。',
      pv: 4530,
      time: '2022-10-18',
    },
    {
      img: 'https://picsum.photos/id/16/136/163',
      name: '出塞',
      author: '王昌龄',
      content: '秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。',
      pv: 3290,
      time: '2021-07-11',
    },
    {
      img: 'https://picsum.photos/id/17/136/163',
      name: '白雪歌送武判官归京',
      author: '岑参',
      content: '北风卷地白草折，胡天八月即飞雪。忽如一夜春风来，千树万树梨花开。',
      pv: 4190,
      time: '2023-03-21',
    },
    {
      img: 'https://picsum.photos/id/18/136/163',
      name: '陋室铭',
      author: '刘禹锡',
      content: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
      pv: 3780,
      time: '2020-06-09',
    },
    {
      img: 'https://picsum.photos/id/19/136/163',
      name: '虞美人',
      author: '李煜',
      content: '春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。',
      pv: 6940,
      time: '2022-12-01',
    },
    {
      img: 'https://picsum.photos/id/20/136/163',
      name: '琵琶行',
      author: '白居易',
      content: '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。',
      pv: 2350,
      time: '2021-05-27',
    },
    {
      img: 'https://picsum.photos/id/21/136/163',
      name: '将进酒',
      author: '李白',
      content: '君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。',
      pv: 8350,
      time: '2023-07-14',
    },
  ];
  const list3 = [
    { title: '诗句:何况螺丸风曰碎，涂鸦将用土炭充----赵翼----《晰斋以大理松烟制墨见赠赋谢》' },
    { title: '诗句:大漠孤烟直，长河落日圆----王维----《使至塞上》' },
    { title: '诗句:会当凌绝顶，一览众山小----杜甫----《望岳》' },
    { title: '诗句:抽刀断水水更流，举杯消愁愁更愁----李白----《宣州谢朓楼饯别校书叔云》' },
    { title: '诗句:春蚕到死丝方尽，蜡炬成灰泪始干----李商隐----《无题》' },
    { title: '诗句:海内存知己，天涯若比邻----王勃----《送杜少府之任蜀州》' },
    { title: '诗句:醉后不知天在水，满船清梦压星河----唐珙----《题龙阳县青草湖》' },
    { title: '诗句:人生自古谁无死，留取丹心照汗青----文天祥----《过零丁洋》' },
    { title: '诗句:落霞与孤鹜齐飞，秋水共长天一色----王勃----《滕王阁序》' },
    { title: '诗句:同是天涯沦落人，相逢何必曾相识----白居易----《琵琶行》' },
    { title: '诗句:纸上得来终觉浅，绝知此事要躬行----陆游----《冬夜读书示子聿》' },
  ];
</script>
<style scoped></style>
